<template>
  <div class="home">
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="OnTabChange">
      <a-tab-pane key="post" tab="文章">
        <ArticleView :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserView :user-list="userList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <ImagesView :img-list="imgList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import MyDivider from "@/components/MyDivider.vue";
import ArticleView from "@/components/ArticleView.vue";
import UserView from "@/components/UserView.vue";
import ImagesView from "@/components/ImagesView.vue";
import { useRoute, useRouter } from "vue-router";
import myAsiox from "@/plugins/myAsiox";

const route = useRoute();
const router = useRouter();
const value = ref("");
const activeKey = route.params.category;

const initSearchParam = {
  text: "",
};
const searchText = ref(route.query.text || "");
const postList = ref([]);
const userList = ref([]);
const imgList = ref([]);
// const loadDataOld = (params: any) => {
//   const postQuery = {
//     ...params,
//     searchText: params.text,
//   };
//   myAsiox.post("post/list/page/vo", postQuery).then((res) => {
//     postList.value = res.records;
//     console.log(res);
//   });
// };
const loadData = () => {
  myAsiox.post("/post/list/page/vo", {}).then((res) => {
    postList.value = res.records;
  });
  myAsiox.post("/user/list/page/vo", {}).then((res) => {
    userList.value = res.records;
  });

  myAsiox.post("/picture/list/pago/vo", {}).then((res) => {
    imgList.value = res.records;
  });
};

loadData();

// 收索的参数
const searchParam = ref(initSearchParam);
watchEffect(() => {
  searchParam.value = {
    ...initSearchParam,
    text: route.query.text,
  } as any;
});

const onSearch = (value: string) => {
  /* 当用户点击搜索的时候就会在当前url后面加上text=value的查询条件 */
  router.push({
    query: {
      ...searchParam.value,
      text: value,
    },
  });
  //alert(value);
};

const OnTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParam.value,
  });
};
</script>
<style scoped>
.home {
  align-items: center;
  margin-left: 200px;
  justify-content: center;
  margin-top: 30px;
}
</style>
